<template>
  <div>
    <div>
      <div v-for="(item,index) in list" :key="index" class="Cart_top">
        <div>
          <input type="checkbox" v-on:click="onclick(item)" :checked="item.checked" />
        </div>
        <div class="Cart_top_left">
          <img :src="item.mainPic" alt />
        </div>
        <div class="Cart_text_bottom">￥{{item.originalPrice}}</div>
        <div class="Cart_text">{{item.title}}</div>
        <div class="Cart_number">
          <div>
            <button @click="delect(item)">-</button>
          </div>
                    <div>{{item.count}}</div>
          <div>
            <button @click="add(item)">+</button>
          </div>

        </div>
      </div>
    </div>
    <div class="cart_delect_jiage">
      <div>
        全选
        <input type="checkbox" @click="onchange" :checked="checkbox" />
      </div>
      <div>总价：{{ocean}}</div>
      <div>
        <button @click="oppo">删除</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      checkbox: false
    };
  },
  mounted() {
    var temp = JSON.parse(localStorage.getItem("cart"));
    this.list = temp;
  },
  computed: {
    ocean: function() {
      var totalmoney = 0;
      this.list.forEach(ele => {
        if (ele.checked) {
          totalmoney += ele.count * ele.originalPrice;
        }
      });
      return totalmoney;
    }
  },
  methods: {
    add(item) {
      item.count++;
    },
    delect(item) {
      item.count--;
      if (item.count < 1) {
        item.count = 1;
      }
    },
    onclick(item) {
      item.checked = !item.checked;
      var a = this.list.every(totp => {
        return totp.checked == true;
      });
      this.checkbox = a;
    },
    onchange() {
      this.checkbox = !this.checkbox;
      this.list.forEach(error => {
        error.checked = this.checkbox;
      });
    },
    oppo() {
      var home = [];
      this.list.forEach(oppp => {
        if (oppp.checked == false) {
          home.push(oppp);
        }
        this.list = home;
        window.console.log(home);
      });
    }
  }
};
</script>

<style scoped>
.Cart_top_left {
  width: 100%;
}
.Cart_top_left img {
  width: 100%;
  /* height: 20%; */
}
.Cart_top {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
}
.Cart_text {
  font-size: 12px;
  width: 100%;
}
.Cart_text_bottom {
  font-size: 18px;
  width: 100%;
  color: red;
}
.Cart_number {
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}
.cart_delect_jiage {
  width: 100%;
  height: 40px;
  /* background-color: red; */
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  bottom: 50px;
}
</style>